<template>
	<view class="container">
         <view class="red-box">
			 <view class="red-box-number">
				 <text class="red-box-number-title">剩余红包数量</text>
				 <view class="red-box-number-input">
					 <text class="red-box-number-input-text">{{rednums}}个</text>
				 </view>
			 </view>
			 <view class="red-button-box">
				 <view class="red-button" @tap="applyred()">
				 		 返回申请红包	  
				 </view>
			 </view>
			 <view class="red-box-info">
				 <text class="red-box-info-title">
					 红包使用详情
				 </text>
				 <view class="red-box-info-block">
					 <view class="red-box-span">
						 <view class="red-box-tab">时间</view>
						 <view class="red-box-tab-list">11/9</view>
					 </view>
					 <view class="red-box-span">
						 <view class="red-box-tab">账号</view>
						 <view class="red-box-tab-list">1515452142</view>
					 </view>
					<view class="red-box-span">
						 <view class="red-box-tab">已使用(40)个</view>
						 <view class="red-box-tab-list">10元</view>
					 </view>
					 <view class="red-box-span">
						 <view class="red-box-tab">未使用(40)个</view>
						 <view class="red-box-tab-list">0元</view>
					 </view>
				 </view>
			 </view>
			
		 </view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			rednums:0,
		};
	},
	onShow() {
		this.tui.haslogin();
		this.init();
	},
	methods: {
		
		applyred(){
			uni.navigateTo({
				url: '/pageschild/red/applyRed'
			})
		},
		redrecords(){
			uni.navigateTo({
				url: '/pageschild/red/redRecords'
			})
		},
		init(){
			let token = this.tui.getToken();
			let datas={
				token:token,
				page:1,
			};
			let nicknames=this.tui.request('user','post',datas,1000,1,'','myShareCouponsCount');
			Promise.resolve(nicknames).then((value)=>{
			   if(value.code==200){
			   	 this.rednums
			   }else{
			   	this.tui.toast(value.message);
			   }
			})
		},
	}
};
</script>

<style lang="scss">
	.red-box{
		background:url('/static/images/red//redbg1.png') top left no-repeat;
		background-size: 100%;
		height: 2000rpx;
	}
	.red-box-number{
		width:60%;
		text-align: center;
		margin:0 auto;
		margin-top: 520rpx;
		
	}
	.red-box-info-block{
		display: flex;
		justify-content: space-between;
	}
	.red-box-tab{
		font-size: 28rpx;
	}
	.red-box-tab-list{
		font-size: 24rpx;color:#fff;
	}
	.red-nums{
		font-size: 40rpx;
		position: absolute;
		color:#969696;
		font-weight: bold;
		left:70rpx;
		top:10rpx;
		text-align: center;
	}
	.red-list{
		display: flex;
		width:70%;
		text-align: center;
		margin:0 auto;
		justify-content: space-around;
	}
	.red-button-box{
		width:74%;
		text-align: center;
		margin:0 auto;
		color:#95010e;
		margin-top: 80rpx;
		
	}
	.red-list-bg{
		position: relative;
		width:100%;
	}
	.red-box-info-title{
		text-align: center;
		display: block;
		margin-top: 20rpx;
		margin-bottom: 30rpx;
	}
	.red-box-info{
		color:#FFB96C;
		width:80%;
		margin:0 auto;
		padding-top:140rpx;
		line-height: 50rpx;
	}
	.red-box-number-title{
		color:#FFB96C;
		font-size: 34rpx;
	}
	.red-box-number-input{
		margin-top: 20rpx;
		
		line-height: 114rpx;
		text-align: left;
		background:url("/static/images/red//red-input.png") 0 0 no-repeat;
		width:100%;
		height: 120rpx;
		margin-left:-10rpx;
		background-size: 100%;
		color:#FA9220;
		font-weight: bold;
		font-size: 50rpx;
	}
	.red-box-number-input-text{
		margin-left: 20rpx;
	}
	.red-button{
		text-align: center;
		line-height: 68rpx;
		border-radius: 40rpx;
		color:#95010e;
		margin-top: 20rpx;
		margin-left: -10rpx;
		background:linear-gradient(180deg, #fac87b, 40%, #fd8848);
		box-shadow: 0rpx 10rpx 4rpx #eb1910;
	}
.container {
background: #91111e;
	.tui-cell-input {
		width: 100%;
		display: flex;
		align-items: center;
		box-sizing: border-box;
		
		input {
			flex: 1;
			padding-left: $uni-spacing-row-base;
		}
	}
	.tui-btn-box {
		padding: 40rpx 30rpx 10rpx 30rpx;
		box-sizing: border-box;
	}
}
</style>
